<template>
  <div>
    <a-page-header :ghost="false" />

    <a-row class="mt-1" type="flex" justify="center" align="top" :gutter="14">
      <a-col :span="6">
        <a-card
          title="部门列表"
          size="small"
          :bodyStyle="{ padding: '5px' }"
          style="heigth: 700px"
        >
          <template #extra><a href="#">more</a></template>
          <a-tree :tree-data="treeData" :default-expand-all="true">
            <template #title0010>
              <span style="color: #1890ff">sss</span>
            </template>
          </a-tree>
        </a-card>
      </a-col>
      <a-col :span="18">
        <a-card> </a-card>
        <a-card class="mt-1">
          <a-table
            bordered
            size="small"
            :data-source="data"
            :columns="columns"
            rowKey="id"
            :loading="loading"
            :pagination="pagination"
            @change="handleChange"
          >
            <template #roles="{ record }">
              <a-tag
                v-for="(role, index) in record.roles"
                :key="index"
                color="blue"
              >
                {{ role.name }}
              </a-tag>
            </template>

            <template #status="{ record }">
              <a-tag v-if="record.status == 10" color="blue">启用</a-tag>
              <a-tag v-else-if="record.status == 9" color="red">停用</a-tag>
              <a-tag v-else color="default">已删除</a-tag>
            </template>

            <template #createdAt="{ record }">
              {{ datefmt(record.created_at, 'YYYY-MM-DD HH:mm:ss') }}
            </template>

            <template #operation="{ record }">
              <a-button type="link" @click="alter(record)">修改</a-button>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>


<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { datefmt } from '@/util';

import {
  Empty,
  Card,
  Col,
  Row,
  PageHeader,
  Table,
  Button,
  Tree,
  Tag,
} from 'ant-design-vue';
import { Icon } from '@/components';
import { axios } from '@/util';

import { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
import { useUser } from './hooks/useUser';

const treeData: TreeDataItem[] = [
  {
    title: 'xx技术有限公司',
    key: 0,
    children: [
      {
        title: '人事部',
        key: 2,
        disabled: false,
      },
      {
        title: '物流部',
        key: 3,
      },
      {
        title: '行政部',
        key: 4,
      },
      {
        title: 'IT部',
        key: 5,
      },
    ],
  },
];

const columns = [
  {
    title: '用户名',
    dataIndex: 'username',
    width: 120,
  },
  {
    title: '姓名',
    width: 120,
    dataIndex: 'name',
  },
  {
    title: '角色',
    dataIndex: 'roles',
    slots: { customRender: 'roles' },
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 60,
    slots: { customRender: 'status' },
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    width: 160,
    slots: { customRender: 'createdAt' },
  },
  {
    title: '操作',
    width: 80,
    slots: { customRender: 'operation' },
  },
];

export default defineComponent({
  components: {
    ARow: Row,
    ACol: Col,
    AEmpty: Empty,
    ACard: Card,
    APageHeader: PageHeader,
    ATable: Table,
    AButton: Button,
    AButtonGroup: Button.Group,
    Icon,
    ATree: Tree,
    ATag: Tag,
  },
  setup() {
    const { columns, search: request, data, pagination, loading } = useUser();

    const handleChange = (page: any, filters: any, sorter: any) => {
      request({
        page: page.current,
        pageSize: page.pageSize,
        sortField: sorter.field,
        sortOrder: sorter.order,
      });
    };

    const searchForm = reactive({
      name: '',
      username: '',
      department: '',
    });
    const search = () => {
      request({
        page: pagination.value.current,
        pageSize: pagination.value.pageSize,
        ...searchForm,
      });
    };
    const reset = () => {
      request({
        page: pagination.value.current,
        pageSize: pagination.value.pageSize,
      });
    };

    return {
      treeData,

      data,
      search,
      searchForm,
      pagination,
      handleChange,
      loading,
      columns,

      datefmt,

      confirm,
    };
  },
});
</script>
